<template>
    <div id = "menu-fourth">
      <menu-layer v-ref:menulayer :menu-items.sync ="menuItems">
      </menu-layer>
    </div>
</template>

<script>
  import * as menuLayer from './menu-layer.vue'
  import * as EchoKey from '../utils/echo-key'

  export default {
    components: {
      menuLayer
    },
    data () {
      return {
        menuItems: []
      }
    },
    [EchoKey.UP] (evt) {
      this.$refs.menulayer.$emit(EchoKey.UP, evt)
    },
    [EchoKey.DOWN] (evt) {
      this.$refs.menulayer.$emit(EchoKey.DOWN, evt)
    },
    [EchoKey.LEFT] (evt) {
      this.$refs.menulayer.$emit(EchoKey.LEFT, evt)
    },
    [EchoKey.RIGHT_ENT] (evt) {
      this.$refs.menulayer.$emit(EchoKey.RIGHT_ENT, evt)
    },
    [EchoKey.FUNC] (evt) {
      this.$refs.menulayer.$emit(EchoKey.FUNC, evt)
    }
  }
</script>

<style lang = "less">
  #menu-fourth {
  }
</style>
